-webkit-box-reflect

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die -webkit-box-reflect CSS Eigenschaft ermöglicht es, den Inhalt eines Elements in eine bestimmte Richtung zu spiegeln.

Syntax

css
/* Direction values */
-webkit-box-reflect: above;
-webkit-box-reflect: below;
-webkit-box-reflect: left;
-webkit-box-reflect: right;

/* Offset value */
-webkit-box-reflect: below 10px;

/* Mask value */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);

/* Global values */
-webkit-box-reflect: inherit;
-webkit-box-reflect: initial;
-webkit-box-reflect: revert;
-webkit-box-reflect: revert-layer;
-webkit-box-reflect: unset;

Werte

above, below, right, left

Schlüsselwörter, die angeben, in welche Richtung die Spiegelung erfolgen soll.

<length>

Gibt die Größe der Spiegelung an.

<image>

Beschreibt die Maske, die auf die Spiegelung angewendet werden soll.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

-webkit-box-reflect = 
  [ above | below | right | left ]? <length>? <image>?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Spezifikationen

Nicht Teil eines Standards. Die standardmäßige Methode, um Spiegelungen in CSS zu erstellen, ist die Verwendung der CSS-Funktion element().

Browser-Kompatibilität

Siehe auch